<!--
  注意：

  当多个 class ，合并所有属性，如果有相同的，相同的属性数组最后一个生效
 -->

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Learn Vue</title>

   <style>
     .active {
       color: red;
       background-color: thistle;
     }
     .unative {
       color: orchid;
     }
   </style>
 </head>
 <body>

   <div id="app">
     <ul>
       <li v-for='(film, index) in movies' v-on:click='selClick(index)'>
        <input type="radio" name="1" :id='film.name' key="item" />
        <label :class='[film.classes]'>{{index}}-{{film.name}}</label>
       </li>
     </ul>

     <hr />

     <ul>
      <li
        v-for='(film, index) in movies'
        v-on:click='selClick(index)'
        :class='film.classes'
      >
        {{index}}-{{film.name}}
      </li>
    </ul>
   </div>

   <script src="../../js/vue.js"></script>
   <script>
     const app = new Vue({
       el: '#app',
       data: {
         movies: [
           {
             name: '海王',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           },
           {
             name: '海尔兄弟',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           },
           {
             name: '火影忍者',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           },
           {
             name: '进击的巨人',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           },
           {
             name: '大人物',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           },
           {
             name: '老手',
             select: false,
             classes: {active: false, unative: true},
             value: ''
           }
         ]
       },
       methods: {
        selClick: function(index = 0) {
          console.log('selClick() index='+index);
          let log = '';
          for(i in this.movies) {
            let item = this.movies[i];
            if(i == index) {
              item.classes = {active: true, unative: false};
              item.value = i+'-'+item.name;
              let e = document.getElementById(item.name);
              e.checked = true;
            }
            else {
              item.classes = {active: false, unative: true};
              item.value = '';
            }
            log += 'index='+i +'.classes='+ item.classes.active +'\n';
          }
          console.log('this.movies=\n'+log+'\n')
        }
       }
     })
   </script>
 </body>
 </html>